import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue' // 引入所有图标组件
import '@/assets/css/global.css' // 引入全局样式
import 'dayjs/locale/zh-cn'  // 确保 Day.js 可以格式化中文日期
import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 创建 Vue 应用
const app = createApp(App)

// 使用 Vuex、Vue Router 和 Element Plus，并配置中文语言包
app.use(store)
app.use(router)
app.use(ElementPlus, {
    locale: zhCn,
})

// 全局注册 Element Plus 图标组件，便于在各个组件中使用
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

// 挂载应用到 id 为 #app 的 DOM 节点上
app.mount('#app')

// 以下代码用于优化 ResizeObserver 回调，防止重复触发

/**
 * debounceFrame：使用 requestAnimationFrame 对回调函数进行防抖处理，
 * 避免 ResizeObserver 在频繁触发时造成性能问题。
 */
const debounceFrame = (callback) => {
    let ticking = false;
    return () => {
        if (!ticking) {
            requestAnimationFrame(() => {
                callback();
                ticking = false;
            });
            ticking = true;
        }
    };
};

// 重写 ResizeObserver，使其内部回调经过防抖处理
const OriginalResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends OriginalResizeObserver {
    constructor(callback) {
        super(debounceFrame(callback));
    }
};
